<template>
	<view class="jian_kong_box" :style="{height: windowHeight + 'px'}">
		<view class="list_box">
			<scroll-view class="full" scroll-y="true" lower-threshold="50" @scrolltolower="handlePagenation()">
				<view class="pro_item_box" v-for="(item, index) in jianKongList" :key="index" @click="goToJianKongDetail(index)">
					<image :src="IMG_URL + item.thumbnailUrl" mode=""></image>
					
					<view class="title_box">
						<text class="title vertical_text mn fs_36">{{ item.titleMn }}</text>
					</view>
				</view>
			</scroll-view>	
		</view>
	</view>	
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				jianKongList: [],
				isPagenation: false,
				pagenation: {
					current: 1,
					size: 12
				},
				jianKongTotal: 0
			};
		},
		
		onLoad() {
			// 获取设备高度
			this.getSystemHeight()
		},
		
		mounted() {
			if (!this.jianKongList.length) {
				this.pagenation.current = 1
				this.getJianKongList()
			}
		},
		
		methods: {	
			// 获取监控列表
			getJianKongList() {
				let params = {
					current: this.pagenation.current,
					size: this.pagenation.size
				}
				NET.request(API.getJianKongList, params, 'GET')
				.then(res => {
					if (res.code == 200) {
						this.jianKongList = [...this.jianKongList, ...res.data]
						this.jianKongTotal = res.total
					}
				})
				.catch(err => {
					console.error('获取监控列表失败！', err)
				})
			},
			
			// 监控 list 分页
			handlePagenation() {
				if (!this.isPagenation) {
					if (this.jianKongList.length < this.jianKongTotal) {
						this.isPagenation = true
						this.pagenation.current ++
						this.getJianKongList()
						setTimeout(() => {this.isPagenation = false}, 500)
					} else {
						uni.showToast({
							title: '数据到底了！', icon: 'none'
						})
					}
				} else {
					return false
				}
			},
			
			// 跳转到监控详情页
			goToJianKongDetail(index) {
				
				let id = this.jianKongList[index].id
				
				uni.navigateTo({
					url: `/subcontract/jian-kong/jian-kong-detail?id=${id}`,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.jian_kong_box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	
		.list_box {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			
			.pro_item_box {
				width: 49%;
				height: 220rpx;
				border-radius: 14rpx;
				background-color: #888;
				float: left;
				white-space: normal;
				margin: 0 0 14rpx 0;
				position: relative;
				// border: 1px solid #1c9aa0;
				
				image { width: 85%; height: 100%; border-radius: 16rpx; }
				
				.title_box {
					width: 15%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
					background-color: #1c9aa0;
					color: #fff;
					border-bottom-right-radius: 14rpx;
					border-top-right-radius: 14rpx;
		
					.title { position: absolute; top: 10rpx; left: 5rpx; }
				}
			}
			.pro_item_box:nth-child(odd) {
				margin-right: 14rpx;
			}
		}
	}
</style>